import React, { useState } from 'react';

function Counter() {
  // useState 钩子用于管理状态
  // count 是状态值，setCount 是更新状态的函数
  const [count, setCount] = useState(0);
  
  // 增加计数的函数
  const increment = () => {
    setCount(count + 1);
  };
  
  // 减少计数的函数
  const decrement = () => {
    setCount(count - 1);
  };
  
  // 重置计数的函数
  const reset = () => {
    setCount(0);
  };
  
  // 使用函数式更新（推荐方式，特别是当新状态依赖于旧状态时）
  const incrementByTwo = () => {
    setCount(prevCount => prevCount + 2);
  };
  
  return (
    <div className="counter">
      <h3>计数器示例</h3>
      <div className="counter-value">{count}</div>
      <div className="counter-buttons">
        <button className="counter-button" onClick={decrement}>-1</button>
        <button className="counter-button" onClick={reset}>重置</button>
        <button className="counter-button" onClick={increment}>+1</button>
        <button className="counter-button" onClick={incrementByTwo}>+2</button>
      </div>
    </div>
  );
}

export default Counter; 